<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style>
* {
	padding: 0;
	margin: 0;
}

input {
	text-align: center;
	width: 100px;
	height: 40px;
	font-size: 16px;
	background-color: #dd001b;
	border-radius: 8px;
	color: white;
}

.item {
	margin-left: 4%;
	margin-top: 4%;
	padding: 8px;
	width: 500px;
	height: auto;
	list-style: none;
	border: 1px solid #dd001b;
	box-shadow: 2px 2px 4px black;
	border-radius: 8px;
}

h4 {
	color: #000;
}

p {
	color: #8b8b8b;
}
</style>
<script src="/demo/js/vue.js"></script>
<script src="/demo/js/axios.min.js"></script>
</head>
<body>
	<div id="webdata">
		<section v-if="isshow">
			<p>We're sorry, we're not able to retrieve this information at
				the moment, please try back later</p>
		</section>
		<section v-if!="isshow">

			<div v-if="loading">loading...</div>
			<ul v-else>
				<li class="item" v-for="i in obj">
					<h4>tripid: {{i.tripid}}</h4>
					<p>tripname：{{i.tripname}}</p>
					<p>cname：{{i.cname}}</p>
				</li>
			</ul>


		</section>
	</div>

	<script>
    var d = new Vue({
        el : "#webdata",
        data () {
            return {
              obj: null,
              loading: true,
              isshow: false,
            }
          },
        mounted() {
        	  	var _this=this;
        	  	console.log(this.isshow);
   			    axios
                .get("/demo/getTripList")
                .then(response => (this.obj = response.data))
                .catch(error => {
			        //console.log(error);
			        this.isshow = true;
			      })
                .finally(() => this.loading = false)
                      
    	}
});

</script>


</body>
</html>